<template>
  <div class="finding">
    <Headers title="发现"/>
    <div class="color"></div>
    <div class="top clearfix">
      <div class="topitem">
        <router-link to="/hotTopic">
          <img src="../images/mainOne/finding/01.png" />
          <p class="text01">最火话题</p>
        </router-link>
      </div>
      <div class="topitem">
        <router-link to="/beautyExport">
          <img src="../images/mainOne/finding/02.png" />
          <p class="text01">最美达人</p>
        </router-link>
      </div>
      <div class="topitem">
       <router-link to="/hotGoods">
        <img src="../images/mainOne/finding/03.png" />
        <p class="text01">最热商品</p>
       </router-link>
      </div>
    </div>

    <div class="main clearfix">

      <p class="pone">彩妆界的奢侈品————Dior</p>

      <p class="ptwo">239个话题 | 34869人热议</p>

      <img src="../images/mainOne/finding/04.png" />

      <img src="../images/mainOne/finding/05.png" />

    </div>

    <div class="main clearfix">

      <p class="pone">不管，就是喜欢YSL</p>

      <p class="ptwo">189个话题 | 23460人热议</p>

      <img src="../images/mainOne/finding/06.png" />

      <img src="../images/mainOne/finding/07.png" />

    </div>
    <div class="add"></div>
    <Footers/>
  </div>
</template>

<script>
import Headers from "../components/changeHeader"
import Footers from "../components/footer"

export default {
  name: "finding",

  components: {

    Headers,
    Footers

  },

  data() {
    return {

    }
  },
 
}
</script>

<style scoped lang="less">
.finding {
  // 第一部分
  .color{
    height: 200/75rem;
    width: 100%;
    background: #ff406f;
  }
  .top {
    width: 710/75rem;
    height: 340/75rem;
    background: white;
    margin: -56/75rem auto;
    margin-bottom: 0;
    border-radius: 20/75rem;
    box-shadow: 2px 2px 20PX gray;
    padding-top: 22/75rem;
    position: relative;
    z-index: 2;

    .topitem {
      width: 204/75rem;
      margin-left: 24/75rem;
      float: left;
      p {
        font-size: 30/75rem;
        color: #FF406F;
        text-align: center;
        margin-top: 15/75rem;
      }
      img{
        width: 208/75rem;
        height: 262/75rem;
      }
    }
  } //第二部分
  .main {
    width: 714/75rem;
    height: 470/75rem;
    background: white;
    margin: 30/75rem auto;
    margin-bottom: 0;
    box-shadow: 1px 1px 10px grey;
    .pone {
      font-size: 35/75rem;
      font-family: SimSun;
      font-weight: 600;
      text-align: center;
      padding-top: 34/75rem;
    }
    .ptwo {
      font-size: 24/75rem;
      font-family: SimSun;
      color: gray;
      text-align: center;
      padding-top: 20/75rem;
    }
    img {
      margin-top: 30/75rem;
      width: 300/75rem;
      height: 300/75rem;
      float: left;
      margin-left: 30/75rem;
    }
  }
  .add {
    height: 100/75rem;
    width: 100%
  }
}
</style>
